<template>
  <template v-if="comSrc">
    <el-image
      :src="comSrc"
      v-bind="$attrs"
      :style="style"
      :class="classes"
      :preview-src-list="previewSrcList.length ? previewSrcList : preview ? [comSrc] : []"
      @load="load"
      :preview-teleported="true"
      @contextmenu.prevent
    >
      <template #error>
        <div class="image-slot">
          <img style="width: 100%; height: 100%" src="@/assets/images/image-error.png" />
        </div>
      </template>
    </el-image>
  </template>
  <div
    class="none-style"
    :style="{ width: `${props.width}px`, height: `${props.height}px` }"
    v-else
  >
    未上传
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
const props = defineProps({
  src: { type: String, default: "" },
  width: { type: Number, default: 100 },
  height: { type: Number, default: 100 },
  disabled: Boolean,
  preview: {
    type: Boolean,
    default: true,
  },
  previewlist: {
    type: Array,
    default: [],
  },
});

const { preview } = toRefs(props);
const classes = ref("is--width-full");
const comSrc = computed(() => {
  // if (props.src && props.src.indexOf('picture.irobotbox') > -1) {
  //   return `${props.src}?x-oss-process=image/resize,w_${props.width || 40},h_${props.height || props.width || 40
  //     }`
  // }
  return props.src;
});
const style = computed(() => {
  let style = {};
  if (props.width) {
    style.width = props.width + "px";
  }
  if (props.height) {
    style.height = props.height + "px";
  }
  style.borderRadius = "4px";
  return style;
});

const previewSrcList = computed(() => {
  return props.previewlist.map((i) => i.image_link || i.url);
});

const load = (e) => {
  const { target } = e;
  const width = target.offsetWidth;
  const height = target.offsetHeight;
  if (width < height) classes.value = "is--height-full";
};
</script>

<style lang="scss" scoped>
.el-image {
  border: 1px solid #f0f0f0;
  .el-image__wrapper {
    .image-slot {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.is--width-full {
  .el-image__inner,
  .el-image__placeholder,
  .el-image__error {
    width: 100%;
    height: auto;
  }
}

.is--height-full {
  .el-image__inner,
  .el-image__placeholder,
  .el-image__error {
    width: auto;
    height: 100%;
  }
}

.el-image__wrapper {
  display: flex;
  justify-content: center;
}

.none-style {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d1d1d1;
  background-color: #f0f0f0;
  font-size: 12px;
  border-radius: 4px;
}

img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
